<template>
  <div id="pie" style="width: 100%; height: 300px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import { EChartsOption, PieSeriesOption } from "echarts";

const props = defineProps(["data"]);

onMounted(() => {
  // 获取dom
  let mypie = echarts.init(document.getElementById("pie")!);
  let option: EChartsOption = {
    // 鼠标悬停提示信息
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: {
        color: "#fff",
      },
    },
    // 侧边栏设置
    legend: {
      orient: "vertical",
      height: "100",
      align: "left",
      left: "right",
    },
    // 设定颜色
    color: [
      "#19D4AE",
      "#63C2FF",
      "#FF7993",
      "#FFCB8C",
      "#0071B6",
      "#C4B4E4",
      "#D87A80",
      "#9CBBFF",
      "#D9D0C7",
      "#87A997",
      "#D49EA2",
      "#5B4947",
      "#7BA3A8",
      "#19D4AE",
      "#5AB1EF",
      "#FA6E86",
    ],
    series: [
      {
        name: "Access From",
        type: "pie",
        // 饼大小
        radius: ["40%", "70%"],
        // 饼位置
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        // 文本颜色（自适应）
        label: {
          color: "inherit",
        },
        // 饼数据
        data: props.data,
      },
    ],
  };
  mypie.setOption(option);
  watch(
    () => props.data,
    (newVal) => {
      (option.series as PieSeriesOption[])[0].data=newVal
      mypie.setOption(option);
    },
    { immediate: true }
  );
});
</script>

<style scoped></style>
